<!doctype html>
<html>
	<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
		html,body{
			margin:0;
			padding: 0;
		}
		#mycanvas_container{
			overflow: hidden;		
		}
	</style>
	
	<!--<script type="text/javascript" src="../dist/jmGraph.min.js"></script>-->	
	</head>
	<body>
		<div id="mycanvas_container"></div>
	</body>
	<script type="module">	
		import jmGraph from "../index.js";

		var container = document.getElementById('mycanvas_container');
		
		var g = new jmGraph(container, {
			width: 800,
			height: 600,
			style: {
				fill: '#000'
			}
		});
		init(g);
			
		function init(g){
			//g.style.fill = '#000'; //画布背景
			var style = {
				stroke:'#46BF86',
				fill: '#556662',
				lineWidth: 1
			};
			style.shadow = '0,0,10,#fff';
			//style.opacity = 0.2;			
			//style.lineCap = 'round';

			//创建一个方块
			var rect = g.createShape('rect',{
				style:style,
				position: {x:300,y:100},
				width:100,
				height:100
			});

			var rect2 = g.createShape('rect',{
				style:style,
				position: {x:'50%',y:'50%'},
				width:50,
				height:50
			});
			rect.children.add(rect2);

			g.children.add(rect);
			rect.canMove(true);

			// 画二个五角星
			var coordinates = [
				{x:50,y:100},
				{x:250,y:100},
				{x:100,y:150},
				{x:150,y:50},
				{x:200,y:150},
				{x:50,y:100},
			];
			style = g.utils.clone(style);
			var star1 = g.createShape('path',{
				style:style,
				points: coordinates
			});
			g.children.add(star1);
			star1.canMove(true);

			var coordinates2 = [
				{x:50,y:300},
				{x:250,y:300},
				{x:100,y:350},
				{x:150,y:250},
				{x:200,y:350},
				{x:50,y:300},
			];
			style = g.utils.clone(style);
			delete style.fill;
			var star2 = g.createShape('path',{
				style:style,
				points: coordinates2
			});
			g.children.add(star2);
			star2.canMove(true);

			function update() {
				if(g.needUpdate) {
					console.log(coordinates);
					g.redraw();
				}
				requestAnimationFrame(update);
			}

			update();
		}
	</script>
</html>